<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vml="urn:schemas-microsoft-com:vml">
<head>

<style type="text/css">
body {
    background-color:white;
    margin:0 auto;
    width:90%;
    min-height:700px;
    height:auto;
    border:1px solid black;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	background-color: #fff;
	font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
.box{
    display:block;
	background: #eee;
	border: 1px solid #aaaaaa;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	padding: 0; 
}

#general { width: 533px;  height: 50px; margin: 12pt auto; }

#back {
	background: #35b70e url(ashera.png)  no-repeat top left;
	width: 420px; height:220px;
	font-weight: bold;
    color: #fff;
	margin: 12pt auto;
}

#abs {
	position:absolute;
	top:0; left:0;
	width:210px; 
	height:45px;
}

.nest, .zorder{ display:block; }
.nest{ position:relative; top:20px; left:20px; }
.zorder{ position:absolute; }

.color1{background-color:#000000; color:#ffffff;}
.color2{background-color:#666666; color:#ffffff;}
.color3{background-color:#aaaaaa; color:#000000;}
.color4{background-color:#ffffff; color:#000000;}

#nest0{ width:500px; height:500px; position:absolute; top:100px; }
#nest1{ width:400px; height:400px; }
#nest2{ width:300px; height:300px; }
#nest3{ width:200px; height:200px; }
#nest4{ width:100px; height:100px; }

#zorder0{ position:absolute; right:20px; top:0; width:400px; height:400px;}
#zorder1{ top:150px; left:150px; width:100px; height:100px; z-index:4; }
#zorder2{ top:100px; left:100px; width:200px; height:200px; z-index:3; }
#zorder3{ top:50px; left:50px; width:300px; height:300px; z-index:2; }
#zorder4{ top:0px; left:0px; width:400px; height:400px; z-index:1; }
#zorder5{ }

.rel {
	position: relative;
	margin: 0 0 0 33px;
	padding: 25px;
	
}
h1{ height:20px; }
textarea{  margin:0 auto; height:100px; width:200px; }
</style>
<!--[if lte IE 8]>
<style type="text/css">
.box { behavior:url("border-radius-v4.htc"); /* give layout */ }
</style>
<![endif]-->
<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<![endif]-->
</head>

<body id="body">
<h1><a href="http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser" title="">Rounded corner / Curved corner divs using CSS 3 in all browsers</a></h1>
<p>Not just divs, but any element*</p>
	<div class="rel">
		<div id="general" class="box">
			lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet 
		</div>
		<div id="back" class="box">
			this cat is a hybrid of domestic and wild breeds :)
			<br>with some transparency for good measure!
		</div>
		<div id="abs" class="box">
			this box is absolutely positioned
		</div>
	    <textarea rows="2" cols="20" class="box">Nope, doesn't work.</textarea>
		<div id='nest0'>
    		<div id='nest1' class="nest box color1">nest1
    		<div id='nest2' class="nest box color2">nest2
    		<div id='nest3' class="nest box color3">nest3
    		<div id='nest4' class="nest box color4">nest4
    		</div></div></div></div>
		</div>		
		<div id="zorder0">
    		<div id="zorder1" class='zorder box color4'>zorder1</div>
    		<div id="zorder2" class='zorder box color3'>zorder2</div>
    		<div id="zorder3" class='zorder box color2'>zorder3</div>
    		<div id="zorder4" class='zorder box color1'>zorder4</div>
		</div>
		
	</div>
</body>
</html>

